import { Link } from 'react-router-dom';
import style from './style.module.scss'
import { useCompareStore } from '@/stores/compareStore'
import { ForwardOutlined } from '@ant-design/icons'
import SpecificInfo from './SpecificInfo';
import type { StoreInfo } from '@/Interface/StoreInfoInterface';
import CmpRadarChart from "../echarts/CmpRadarChart";
import { useCmpDataStore } from '@/stores/cmpDataStore';

export default function CmpInfo() {

  const compare = useCompareStore((state) => state.compare);
  const cmpData = useCmpDataStore((state) => state.cmpData);

  return (
    <>
      <div className={`${style.cmpInfo} ${compare ? style.leftshow : style.hide} `}>
        <div className={style.cmpTop}>
          <Link to="/compare">
            详细对比
            <ForwardOutlined />
          </Link>
        </div>
        <SpecificInfo store={cmpData as StoreInfo} />
        <div className={style.radar}>
          <CmpRadarChart store={cmpData as StoreInfo} />
        </div>
      </div>
    </>
  )
}
